<script setup lang="ts">
import { DictSelect } from "@/components/common/DictSelect";
import { ImageViewer } from "@/components/common/ImageViewer";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import Refresh from "@iconify-icons/ep/refresh";
import { ref } from "vue";
import tree from "./tree.vue";
import { useStoreOrder } from "./utils/hook";

defineOptions({
  name: "StoreStock"
});

const iconHide = ({ row }) => {
  if (row.specCodeList.length == 0 || row.specCodeList.length == 1) {
    return "icon-no";
  }
};

const treeRef = ref();
const formRef = ref();
const tableRef = ref();
const {
  form,
  loading,
  columns,
  childColumns,
  dataList,
  pagination,
  deviceDetection,
  treeData,
  treeLoading,
  onTreeSelect,
  selectData,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useStoreOrder(tableRef, treeRef);
</script>

<template>
  <div style="box-shadow: none">
    <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
      <tree
        ref="treeRef"
        :class="['mr-[10px]', deviceDetection() ? 'w-full' : 'min-w-[220px]']"
        :treeData="treeData"
        :treeLoading="treeLoading"
        @tree-select="onTreeSelect"
      />
      <div
        :class="[
          deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-230px)]'
        ]"
      >
        <!-- 筛选 -->
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
        >
          <el-form-item label="商品编码：" prop="goodsCode">
            <el-input
              v-model="form.goodsCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="商品名称：" prop="goodsName">
            <el-input
              v-model="form.goodsName"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="商品类型" prop="goodsType">
            <DictSelect
              v-model="form.goodsType"
              dict-type="PRODUCT_TYPE"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="仓库：" prop="depositoryId">
            <el-select
              v-model="form.depositoryId"
              clearable
              filterable
              placeholder="请选择"
              class="!w-[180px]"
            >
              <el-option
                v-for="item in selectData.ckList"
                :key="item.id"
                :label="item.depositoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商：" prop="supplierId">
            <el-select
              v-model="form.supplierId"
              clearable
              filterable
              placeholder="请选择"
              class="!w-[180px]"
            >
              <el-option
                v-for="item in selectData.gysList"
                :key="item.id"
                :label="item.supplierName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon('ri:search-line')"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <PureTableBar title="" :columns="columns" @refresh="onSearch">
          <template v-slot="{ size, dynamicColumns }">
            <div class="goods-table">
              <pure-table
                ref="tableRef"
                row-key="id"
                adaptive
                :adaptiveConfig="{ offsetBottom: 90 }"
                align-whole="center"
                :loading="loading"
                :size="size"
                :data="dataList"
                :columns="dynamicColumns"
                :pagination="{ ...pagination, size }"
                show
                :header-cell-style="{
                  background: 'var(--el-fill-color-light)',
                  color: 'var(--el-text-color-primary)'
                }"
                @selection-change="handleSelectionChange"
                @page-size-change="handleSizeChange"
                @page-current-change="handleCurrentChange"
              >
                <template #expand="{ row }">
                  <div class="ml-[30px]">
                    <!-- ==================================== 子表格 =========================== -->
                    <pure-table
                      row-key="specCode"
                      class="bd-hide"
                      align-whole="center"
                      :data="row.specCodeList"
                      :columns="childColumns"
                      :show-header="false"
                      :header-cell-style="{
                        background: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-primary)'
                      }"
                    >
                      <!-- 商品名称/规格名称 -->
                      <template #goodsName="{ row: crow }">
                        <div class="flex items-center text-cut">
                          <ImageViewer
                            radius="8px"
                            :src="crow.specImageJson || row.imageJson"
                          />
                          <div class="ml-2 flex-1 text-cut">
                            {{ crow.specName || "主规格" }}
                          </div>
                        </div>
                      </template>
                      <!-- 规格条码 -->
                      <template #barCode="{ row }">
                        <el-tooltip effect="dark" placement="top-start">
                          <template #content>
                            <div>主条码: {{ row.barCode }}</div>
                            <div>
                              辅助条码:
                              {{
                                row.braCodeList && row.braCodeList.length > 0
                                  ? row.braCodeList
                                      .map(v => v.barCode)
                                      .join(", ")
                                  : "--"
                              }}
                            </div>
                          </template>
                          <div class="ml-[-10px] mr-[-10px]">
                            {{ row.barCode || "--" }}
                          </div>
                        </el-tooltip>
                      </template>
                    </pure-table>
                  </div>
                </template>
                <!-- 规格条码 -->
                <template #barCode="{ row }">
                  <template
                    v-if="row.specCodeList && row.specCodeList.length == 1"
                  >
                    <el-tooltip effect="dark" placement="top-start">
                      <template #content>
                        <div>主条码: {{ row.specCodeList[0].barCode }}</div>
                        <div>
                          辅助条码:
                          {{
                            row.specCodeList[0].braCodeList &&
                            row.specCodeList[0].braCodeList.length > 0
                              ? row.specCodeList[0].braCodeList
                                  .map(v => v.barCode)
                                  .join(", ")
                              : ""
                          }}
                        </div>
                      </template>
                      <div class="ml-[-10px] mr-[-10px]">
                        {{ row.specCodeList[0].barCode || "--" }}
                      </div>
                    </el-tooltip>
                  </template>
                </template>
              </pure-table>
            </div>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>
<style>
.el-popconfirm__main {
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
<style lang="scss" scoped>
:deep(.bd-hide .el-table--fit .el-table__inner-wrapper:before) {
  background-color: #fff;
}
// :deep(.icon-no .el-table__expand-icon) {
//  display: none;
// }
</style>
